<template>
<div>

    <van-cell-group>
        <van-nav-bar :fixe="true" :placeholder="true" title="已审核加班" left-text="返回" left-arrow @click-left="onClickLeft" />
        
    </van-cell-group>

    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell-group>
            <van-cell v-for="(item,index) in list" :key="index">
                <!-- <van-card :num="111" :price="555" desc="描述信息" :title="666" > -->
                <van-card  >
                    <template #tags>
                        <van-cell :value="Transformation(item.recordType)"  style="padding-bottom: 3px;padding-top: 3px; padding-right: 0px;">
                            <!-- 使用 title 插槽来自定义标题 -->
                            <template #title>
                                <van-tag type="danger" size="large">{{item.recordStatusContent}}</van-tag>
                                {{Transformation(item.recordType)}}
                            </template>
                            <van-button type="info" size="small" @click="transmit(item.recordId,item.recordType)" >详情</van-button>
                            <!-- <van-button type="info" size="small" @click="approval(item.recordId,item.recordType,true)" >审批</van-button> -->
                            <!-- <van-tag type="primary" size="large" @click="aaa()">详情</van-tag> -->
                        </van-cell>
                        <!-- <van-cell title="状态" :value="item.recordStatusContent" lable="666" /> -->

                        <van-cell title="开始时间" :value="item.planStartTime" style="padding-bottom: 3px;padding-top: 3px;" />
                        <van-cell title="结束时间" :value="item.planEndTime" style="padding-bottom: 3px;padding-top: 3px;" />
                        <!-- <van-cell title="时长" :value="item.planSumTime" style="padding-bottom: 3px;padding-top: 3px;" /> -->
                        <van-cell title="申请人" :value="item.userName" style="padding-bottom: 3px;padding-top: 3px;" />
                        <van-cell title="申请日期" :value="item.applyTime" style="padding-bottom: 3px;padding-top: 3px;" />
                    </template>
                    <!-- <template #footer> -->
                    <!-- <van-button size="mini">按钮</van-button>
            <van-button size="mini">按钮</van-button>-->
                    <!-- <van-button size="mini" type="info">信息按钮</van-button> -->
                    <!-- <van-button round type="info">圆形按钮</van-button> -->
                    <!-- </template> -->
                </van-card>
            </van-cell>
        </van-cell-group>
    </van-list>
</div>
</template>

<script>
import Cookies from "js-cookie";
import {
    findList
} from "@/api/fy";
import {
    Transformation
} from "@/api/common";
import {
    parseTime,
} from '@/utils'
export default {
    data() {
        return {
            activeName: "a",
            type: "",
            value: 0,
            active: 0,
            switch1: false,
            switch2: false,
            option: [{
                    text: "类型",
                    value: 0
                },
                {
                    value: "",
                    text: "全部"
                },
                {
                    value: 2,
                    text: "待审核"
                },
                {
                    value: 1,
                    text: "草稿"
                },
                {
                    value: 3,
                    text: "被驳回"
                },
                {
                    value: 41,
                    text: "待销毁"
                },
                {
                    value: 21,
                    text: "销假确认"
                },
                {
                    value: 5,
                    text: "完成"
                }
            ],
            list: [],
            list1: [],
            loading: false,
            finished: false,
            show: false, //开始时间弹窗
            show1: false, //结束时间弹窗
            minHour: 10,
            maxHour: 20,
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2021, 12, 31),
            currentDate: new Date(), //开始标准时间
            currentDate1: new Date(), //结束标准时间
            starttime: "", //开始时间
            starttime1: "", //开始时间时间戳
            endtime: "", //结束时间
            endtime1: "", //结束时间时间戳
            page: "",
            limit: 10,
            queryType: "WORK",
            recordType: "",
            status: 5,
            dataLimitType: 4,
            userId: Cookies.get("userId"),
            applyTimeStart: "",
            applyTimeEnd: "",
            total: 11
        };
    },
    created() {
        this.applyTime =
            this.currentDate.getFullYear() +
            "年" +
            (Number(this.currentDate.getMonth()) + 1) +
            "月" +
            this.currentDate.getDate() +
            "日 " +
            this.currentDate.getHours();
        // this.applyTime = new Date(this.currentDate).getTime() / 1000;
        //this.getmyLeaveStatistics(this.currentDate.getFullYear());
    },
    methods: {
        onChange(index) {
            // Notify({
            //     type: 'primary',
            //     message: index
            // });
            this.list = []
            this.list1 = []
            this.page = ''
            if (index == 0) {
                this.queryType = 'WORK'
                this.onLoad();
            } else if (index == 1) {
                this.queryType = 'LEAVE'
                this.onLoad();
            } else if (index == 2) {
                this.dataLimitType = 5
                this.queryType = 'LEAVEGZ'
                this.onLoad();
            } else if (index == 3) {
                this.queryType = 'ABROAD'
                this.onLoad();
            }
        },
        transmit(recordId, recordType) {
            this.$router.push({
                name: "jbxq",
                params: {
                    recordId: recordId,
                    recordType: recordType
                }
            });
        },
         approval(recordId, recordType,approval) {
            this.$router.push({
                name: "jbxq",
                params: {
                    recordId: recordId,
                    recordType: recordType,
                    approval:approval
                }
            });
        },
        select() {
            this.status = this.type;
            this.applyTimeStart = this.starttime.slice(0, 8);
            this.applyTimeEnd = this.endtime.slice(0, 8);
            this.show1 = false;
            this.onLoad();
        },
        Transformation(type) {
            if (type == "LEAVE_ANNUAL") {
                return "年休假";
            } else if (type == "LEAVE_BREASTFEEDING") {
                return "哺乳假";
            } else if (type == "LEAVE_COMPENSATED") {
                return "调休假";
            } else if (type == "LEAVE_CONTRACEPTION") {
                return "节育假";
            } else if (type == "LEAVE_FUNERAL") {
                return "丧假";
            } else if (type == "LEAVE_MARRIAGE") {
                return "婚假";
            } else if (type == "LEAVE_MATERNITY") {
                return "产假";
            } else if (type == "LEAVE_NURSING") {
                return "护理假";
            } else if (type == "LEAVE_PATERNITY") {
                return "陪产假";
            } else if (type == "LEAVE_PERSONAL") {
                return "事假";
            } else if (type == "LEAVE_VISIT_PARENT") {
                return "探亲假(父母)";
            } else if (type == "LEAVE_VISIT_SPOUSE") {
                return "探亲假(配偶)";
            }
        },
        onConfirm() {
            this.$refs.item.toggle();
        },
        onClickLeft() {
            this.$router.go(-1);
        },
        onLoad() {
            // 异步更新数据
            //setTimeout 仅做示例，真实场景中一般为 ajax 请求
            setTimeout(() => {
                if (this.page == "") {
                    this.page = 1;
                } else {
                    this.page = this.page + 1;
                }

                const that = this;

                const obj = {
                    page: this.page,
                    limit: this.limit,
                    queryType: this.queryType,
                    recordType: "",
                    status: this.status,
                    dataLimitType: this.dataLimitType,
                    userId: this.userId,
                    applyTimeStart: this.applyTimeStart,
                    applyTimeEnd: this.applyTimeEnd
                };
                console.log(obj);
                findList(obj).then(function (res) {
                    that.total = res.data.total;
                    let arr = res.data.rows;
                    arr.forEach(item => {
                          const s = item.planStartTime
                        const e = item.planEndTime
                        const a = item.applyTime
                        const ns = new Date(s).getTime() / 1000
                        const ne = new Date(e).getTime() / 1000
                        const na = new Date(a).getTime() / 1000
                        item.planStartTime = parseTime(ns, '{y}-{m}-{d} {h}:{i}')
                        item.planEndTime = parseTime(ne, '{y}-{m}-{d} {h}:{i}')
                        item.applyTime = parseTime(na, '{y}-{m}-{d} {h}:{i}')
                        that.list.push(item);
                    });
                });

                for (let i = 0; i < 10; i++) {
                    this.list1.push(this.list1.length + 1);
                }
                // 加载状态结束
                this.loading = false;
                // 数据全部加载完成
                if (that.list1.length >= that.total) {
                    // alert(that.total)
                    that.finished = true;
                }
            }, 1000);
        },
        start() {
            this.show = true;
        },
        // 选择结束时间
        end() {
            this.show1 = true;
        },
        // 点击确定
        confirm() {
            this.show = false;
            this.starttime =
                this.currentDate.getFullYear() +
                "-" +
                (Number(this.currentDate.getMonth()) + 1) +
                "-" +
                this.currentDate.getDate() +
                " " +
                this.currentDate.getHours() +
                ":" +
                this.currentDate.getMinutes();
            this.starttime1 = new Date(this.currentDate).getTime() / 1000;
        },
        // 点击取消
        cancel() {
            this.show = false;
        },
        confirm1() {
            this.show1 = false;
            this.endtime =
                this.currentDate1.getFullYear() +
                "-" +
                (Number(this.currentDate1.getMonth()) + 1) +
                "-" +
                this.currentDate1.getDate() +
                " " +
                this.currentDate1.getHours() +
                ":" +
                this.currentDate1.getMinutes();
            this.endtime1 = new Date(this.currentDate1).getTime() / 1000;
        },
        cancel1() {
            this.show1 = false;
        },
        // 处理控件显示的时间格式
        formatter(type, value) {
            // 格式化选择器日期
            if (type === "year") {
                return `${value}年`;
            } else if (type === "month") {
                return `${value}月`;
            } else if (type === "day") {
                return `${value}日`;
            } else if (type === "hour") {
                return `${value}时`;
            } else if (type === "minute") {
                return `${value}分`;
            }
            return value;
        }
    }
};
</script>

<style>
</style>
